import React from "react";
import { useState } from "react";
import "./index.scss";
import { store } from "@/store";
import { useNavigate } from "react-router-dom";

import { Input, Button } from "@/components";

const Login: React.FC = () => {
  const navigate = useNavigate();

  const [account, setAccount] = useState("admin");
  const [password, setPassword] = useState("123456");

  const handleLogin = () => {
    store._dispatch("setUser", {
      account,
      password,
    });

    navigate("/admin/api");
  };

  return (
    <div className="login-box">
      <div className="form-content">
        <div className="form-item">
          <Input value={account} onChange={setAccount} />
        </div>
        <div className="form-item">
          <Input type="password" value={password} onChange={setPassword} />
        </div>
        <div className="form-item">
          <Button onClick={handleLogin}>登录</Button>
        </div>
      </div>
    </div>
  );
};

export default Login;
